ES6 模块加载

一、模块加载

1.1 简介

ES6 之前已经出现了 js 模块加载的方案，最主要的是 CommonJS 和 AMD 规范。commonjs 主要应用于服务器，实现同步加载，如 nodejs。AMD 规范应用于浏览器，如 requirejs，为异步加载。同时还有 CMD 规范，为同步加载方案如 seaJS。

ES6 属于编译时加载，模块主要有两个功能：export 和 import

二、export 输出

export 命令用于规定模块的对外接口

单个输出

// 输出变量
export const num1 = 1;
// 输出函数
export function fn1(){};

批量输出

const num1 = 1;
function fn1() {};
export {num1, fn1}

重命名

const num1 = 1;
export {num1 as n1}

动态绑定

export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

下面代码输出变量 num1，值为 1，1 秒之后值变成 2。

export let num1 = 1;
setTimeout(() => num1 = 2, 1000);

输出整个类

export default className

三、import 导入

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

批量导入/按需导入

import命令接受一个对象（用大括号表示），里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（ex.js）对外接口的名称相同。

// 后面不用加 .js
import {num1, fn1} from './ex';
// 如果 from 后面的路径没有路径符 ./ ../，那么会去 node_modules 里面找对应的包
import Vue from 'vue';

重命名

import { num1 as n1 } from './ex'

提升

import 命令具有提升效果，会提升到整个模块的头部，所以下面的代码并不会报错

fn1();
import { fn1 } from './ex'

执行

import语句会执行所加载的模块，因此可以有下面的写法。

import './ex';

上面代码仅仅执行lodash模块，但是不输入任何值

四、实际应用

vue 中批量导入多个组件

import { Navbar, Sidebar, AppMain, TagsView } from './components'

'./components' 后面没有后缀，会找到名为 components 的文件，如果是文件夹，则会到文件夹下找到 index.js 文件。

在 index.js 文件中，则可以统一管理组件的导出。

export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView'
export { default as AppMain } from './AppMain'